<template>
	<div>

		<div class='tyepbar'>
			<div class='tyepbar_box'>
				<div v-for='item,index in typeClass[0].data' :key='index' @click='getTiemActait(index,item)'
					class='tyepbar_box_tiem' :class='{accrevtbg:Actait == index }'>{{item.name}}</div>
			</div>
			<div style='width: 10%;margin-top: 2%;width: 10%;' @click='unfoldFunc'>
				<u-icon :name="iconName"></u-icon>
			</div>
		</div>


		<div v-if="show" class='typeonw' v-for='item,index in typeClass' :key='index' v-show='index > 0'>
			<div class='tyepbar_box_tiem'>{{item.name }}</div>
			<div class='typeClassList'>
				<div v-for='item,index in item.data' :key='index' @click='getTiemActait_chlid(item.name)'
					class='tyepbar_box_tiem' :class='{accrevtbgChlid:Actaitchlid == item.name }'>{{item.name}}</div>
			</div>
		</div>


		<!-- 		<div class="container">
			<div class="item" v-for='item,index in resultList' :key='index'>
				<view class='recommend'>
					<image :src="item.coverImgUrl"></image>
					<image class="hoverShow" src="../../../../../static/Image/close.png"></image>
					<div class='recommend_BXo' @click='musicListInfo(item)'>
						<view class="recommend_msg">{{item.playCount | unitConverter}}</view>
						<text class="recommend_title">{{item.name}}</text>
						<view class="recommend_msg">{{item.copywriter}}</view>
					</div>
				</view>
			</div>
		</div> -->

		<view class="scroll">

			<z-paging ref="musiclist" :fixed="true" autowire-list-name="resultList" autowire-query-name="getMusicType">
				<maramlee-waterfalls-flow :list="resultList" imageSrcKey='coverImgUrl'>
					<template v-slot:default="item">
						<view class="cnt">
							<view class="title">{{item.playCount | unitConverter}}</view>
							<view class="title">{{item.copywriter }}</view>
							<view class="text">{{item.name}}</view>
						</view>
					</template>
				</maramlee-waterfalls-flow>
			</z-paging>

		</view>



		<view class="wrap">
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
	</div>
</template>

<script>
	import {
		playlistCategories
	} from '../../../../../static/js/staticData.js';
	export default {
		data() {
			return {
				typeClass: [],
				resultList: [],
				Actait: 0,
				iconName: 'arrow-down',
				Actaitchlid: '',
				show: true,
				limit: 10,
				scrollTop: 0,
			};
		},
		onLoad() {
			const playlistNews = [{
				name: '',
				data: []
			}, {
				name: '',
				data: []
			}, {
				name: '',
				data: []
			}, {
				name: '',
				data: []
			}, {
				name: '',
				data: []
			}, {
				name: '',
				data: []
			}];
			playlistCategories.forEach((item, index) => {

				item.bigCat === 'static' && (playlistNews[0]['data'].push(item), playlistNews[0]['name'] =
					'static')

				item.bigCat === '语种' && playlistNews[1]['data'].push(item), playlistNews[1]['name'] = '语种'

				item.bigCat === '风格' && playlistNews[2]['data'].push(item), playlistNews[2]['name'] = '风格'

				item.bigCat === '场景' && playlistNews[3]['data'].push(item), playlistNews[3]['name'] = '场景'

				item.bigCat === '情感' && playlistNews[4]['data'].push(item), playlistNews[4]['name'] = '情感'

				item.bigCat === '主题' && playlistNews[5]['data'].push(item), playlistNews[5]['name'] = '主题'
			})
			this.typeClass = playlistNews;
			this.getMusicType('全部');

		},
		// onPageScroll(e) {
		// 	this.scrollTop = e.scrollTop;
		// },
		// onPullDownRefresh() {
		// 	this.limit = 10;
		// 	this.resultList = []
		// 	this.getMusicType('全部');
		// },
		onReachBottom() {
			this.limit += 10;
			this.getMusicType(1, 10, this.Actaitchlid || '全部');
		},
		methods: {
			getTiemActait(index, data) {
				this.Actait = index;
				// this.getMusicType(data.name)
			},
			unfoldFunc() {
				this.iconName = this.iconName == 'arrow-down' ? 'arrow-up' : 'arrow-down';
				this.show = !this.show;
			},
			getTiemActait_chlid(name) {
				this.Actaitchlid = name;
				this.resultList = [];
				this.getMusicType(1, 10, name)
			},
			async getMusicType(pageNo = 1, pageSize = 10, cat = '全部') {
				const {
					playlists
				} = await this.MusicRequest('top/playlist', {
					cat,
					limit: this.limit
				});
				this.resultList = [...this.resultList, ...playlists];

				console.log(this.resultList);
				this.$refs.musiclist.complete(this.resultList)

				// uni.stopPullDownRefresh();
			},
			musicListInfo(data) {
				uni.navigateTo({
					url: './musicListInfo?id=' + data.id,
				});
			}
		},
	}
</script>

<style scoped lang="less">
	@import '../../../../../static/css/mlmCommon.less';
	@import '../../../../../static/css/user.less';
	@import '../../../../../static/css/sharePopup.less';
	
	.scroll{
		.z-paging-content-fixed{
			top: 0!important;
		}
	}

	.tyepbar {
		width: 100%;
		display: flex;
		height: 80rpx;
		background: #f8f8f8;
	}

	.tyepbar_box {
		width: 90%;
		display: flex;
		overflow: hidden;
		overflow-x: scroll;
	}

	.scroll {
		position: absolute;
		height: 100%;
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
	}

	.typeonw {
		width: 100%;
		background-color: #F8F8F8;
		height: auto;
		z-index: 999999999999;
	}

	.tyepbar_box_tiem {
		width: auto;
		margin: 10rpx;
		font-size: 1rem;
		font-weight: 700;
		padding: 6rpx;
	}

	.accrevtbg {
		background: #f5f5f7;
	}

	.accrevtbgChlid {
		background: #ffffff;
	}

	.typeClassList {
		display: flex;
		flex-wrap: nowrap;
		/* 允许项目换行,空间不足时分成多行显示 */
		flex-wrap: wrap;
		/* 允许项目换行,第一行在下面,反向排列项目 */
		flex-wrap: wrap;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .5s;
	}

	.fade-enter,
	.fade-leave-to

	/* .fade-leave-active below version 2.1.8 */
		{
		opacity: 0;
	}

	.container {
		display: flex;
		flex-wrap: nowrap;
		/* 允许项目换行,空间不足时分成多行显示 */
		flex-wrap: wrap;
		/* 允许项目换行,第一行在下面,反向排列项目 */
		flex-wrap: wrap;
	}

	.item {
		width: 30%;
		margin: 1.5%;
	}

	.recommend {
		width: 100%;
		height: 80%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: row wrap;
		justify-content: center;

		image:nth-child(1) {
			width: 240rpx;
			height: 240rpx;
			// position: absolute;
			position: inherit;
		}

		image:nth-child(2) {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			display: none;
		}
	}

	.app/deep/.u-cell_title {
		font-size: 36rpx;
		font-weight: 700;
	}

	.recommend_title {
		font-size: 32rpx;
		font-weight: 600;
		.Beyondhidden();
	}

	.recommend_msg {
		font-size: 22rpx;
		opacity: 0.68;
		line-height: 18px;
		.Beyondhidden();
	}

	.recommend_BXo {
		// position: absolute;
		// bottom: -42%;
	}

	.recommend:hover {

		image:nth-child(2) {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			display: block;
			animation-name: slide;
			animation-duration: 0.5s;
			animation-timing-function: ease-in;
		}
	}


	@keyframes slide {
		0% {
			width: 0rpx;
			height: 0rpx;
		}

		50% {
			width: 40rpx;
			height: 40rpx;
		}

		100% {
			width: 80rpx;
			height: 80rpx;
		}
	}

	@keyframes move {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-50%);
		}
	}

	.targetop {
		z-index: 999;
		position: fixed;
		bottom: 20rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: rgb(255, 255, 255);
		border-radius: 50%;
		right: 20rpx;
	}
	.cnt{
		padding: 5px;
	}
</style>


<style lang="scss" scoped>
	// 这里可以自行配置
	$border-radius: 6px;

	.waterfalls-box {
		position: relative;
		width: 100%;
		overflow: hidden;

		.waterfalls-list {
			width: calc((100% - var(--offset) * (var(--cols) - 1)) / var(--cols));
			position: absolute;
			background-color: #fff;
			border-radius: $border-radius;
			// 防止刚开始渲染时堆叠在第一幅图的地方
			left: calc(-50% - var(--offset));

			.waterfalls-list-image {
				width: 100%;
				will-change: transform;
				border-radius: $border-radius $border-radius 0 0;
				display: block;

				&.single {
					border-radius: $border-radius;
				}
			}
		}
	}
</style>
